<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container flex flex-col-reverse mx-auto lg:flex-row">
		<div
			class="flex flex-col px-6 py-8 space-y-6 rounded-sm sm:p-8 lg:p-12 lg:w-1/2 xl:w-2/5"
			[ngClass]="['bg' + primary, 'text' + contrast]"
		>
			<div class="flex space-x-2 sm:space-x-4">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					class="flex-shrink-0 w-6 h-6"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
					/>
				</svg>
				<div class="space-y-2">
					<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
					<p class="leading-snug">
						Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati
						voluptatem similique!
					</p>
				</div>
			</div>
			<div class="flex space-x-2 sm:space-x-4">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					class="flex-shrink-0 w-6 h-6"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
					/>
				</svg>
				<div class="space-y-2">
					<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
					<p class="leading-snug">
						Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati
						voluptatem similique!
					</p>
				</div>
			</div>
			<div class="flex space-x-2 sm:space-x-4">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					class="flex-shrink-0 w-6 h-6"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
					/>
				</svg>
				<div class="space-y-2">
					<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
					<p class="leading-snug">
						Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati
						voluptatem similique!
					</p>
				</div>
			</div>
		</div>
		<div class="lg:w-1/2 xl:w-3/5" [ngClass]="['bg' + default]">
			<div class="flex items-center justify-center p-4 md:p-8 lg:p-12">
				<img
					class="rounded-lg shadow-lg bg-gray-500 aspect-video sm:min-h-96"
					src="https://source.unsplash.com/640x480/"
					alt=""
				/>
			</div>
		</div>
	</div>
</section>
